extends ../../components/layout
append style
  +css('demo/demo.css')
block title
  title list
block content
  header.demos-header
    h1.demos-title 表单
  section
    .gzl-cell__title 单选项
    .gzl-cell
      .gzl-cell__bd
        .gzl-option
          -for(var i=0;i<3;i++)
            label
              input(type="radio" name="test1")
              span #{i}
    .gzl-cell__title 复选项
    .gzl-cell
      .gzl-cell__bd
        .gzl-option
          -for(var i=0;i<3;i++)
            label
              input(type="checkbox")
              span #{i}
    .gzl-cell__title 单选列表项
    .gzl-cells.gzl-cell_check
      -for(var i=0;i<3;i++)
        label.gzl-cell
          .gzl-cell__bd
            if i === 0
              input.gzl-check(type="radio" name="radio1" checked)
            else
              input.gzl-check(type="radio" name="radio1")
            em.gzl-check__info 标题文字
            +icon('#icon-tick')(class="gzl-check__icon")
    .gzl-cell__title 复选列表项
    .gzl-cells.gzl-cell_check
      -for(var i=0;i<3;i++)
        label.gzl-cell
          .gzl-cell__bd
            if i === 0
              input.gzl-check(type="checkbox" checked)
            else
              input.gzl-check(type="checkbox")
            em.gzl-check__info 标题文字
            +icon('#icon-tick')(class="gzl-check__icon")
    .gzl-cell__title 表单
    .gzl-cells
      .gzl-cell.error
        .gzl-label 输入
        .gzl-cell__bd
          input.gzl-input(placeholder='请输入')
      .gzl-cell
        .gzl-label 输入
        .gzl-cell__bd
          input.gzl-input(placeholder='请输入')
      .gzl-cell
        .gzl-label 手机验证码
        .gzl-cell__bd
          input.gzl-input(placeholder='请输入')
        .gzl-cell__ft
          .gzl-vcode-btn.btn.btn-s 获取验证码
      .gzl-cell
        .gzl-label 验证码
        .gzl-cell__bd
          input.gzl-input(placeholder='请输入')
        .gzl-cell__ft
          .gzl-vcode-img
            +icon
    .gzl-cell__title 开关
    .gzl-cell
      .gzl-cell__bd 标题文字
      .gzl-cell__ft
        input.gzl-switch(type="checkbox")
    .gzl-cell__title count
    .gzl-cell
      .gzl-cell__bd 标题文字
      .gzl-cell__ft
        .gzl-count
          .gzl-count__minus
            +icon('#icon-minus')
          .gzl-count__num 1
          .gzl-count__plus
            +icon('#icon-plus')
    .gzl-cell__title 文本域
    .gzl-cell
      .gzl-cell__bd
        textarea.gzl-textarea
        .gzl-textarea-counter
          span 0
          | /200
    .gzl-cell__tips 
      h2 注意事项
      .tip-info.gzl-flex 
        .decimal 1
        .gzl-flex__item 发票信息提交后不能进行更改；
      .tip-info.gzl-flex 
        .decimal 2
        .gzl-flex__item 发票将以电子发票的形式发送；
      .tip-info.gzl-flex 
        .decimal 3
        .gzl-flex__item 发票将会发送到您填写的接受邮箱中。